<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <link rel="stylesheet" href="css/homepage.css">
</head>
<body>
<section>
    <div class="top container20 clearfix ">
        <img src="./images/homepage/msg.png" alt="消息" class="msg fl">
        <img src="./images/homepage/setting.png" alt="设置" class="setting fr">
    </div>
    <img src="./images/homepage/bg.jpg" alt="bg" class="bg">
    <div class="info container20">
        <div class="info-top s-box">
            <div class="head-shot">
                <img src="images/homepage/headshot.jpg" alt="头像">
            </div>
            <div class="msg">
                <p>我爱下山</p>
                <p>15825369842&nbsp;&nbsp;ID:9527</p>
            </div>
        </div>
        <div class="info-bottom s-box">
            <div class="fl">我的积分：<span class="red">9520</span></div>
            <div class="fr" class="fr">优惠券：<span class="red">3</span></div>
        </div>
    </div>
    <div class="myOrder container20">
        <div class="myOrder-top s-box clearfix">
            <h3 class="fl">
                我的订单
            </h3>
            <a href="/myOrder.html" class="fr">全部订单 &gt;</a>
        </div>
        <div class="myOrder-bottom s-box">
            <a href="javascript:;"><img src="" alt="待付款"><span>待付款</span></a>
            <a href="javascript:;"><img src="" alt="待发货"><span>待发货</span></a>
            <a href="javascript:;"><img src="" alt="待收货"><span>待收货</span></a>
            <a href="javascript:;"><img src="" alt="待评价"><span>待评价</span></a>
        </div>
    </div>
    <div class="menu container20">
        <h3 class="s-box">功能菜单</h3>
        <div class="menu-icons s-box">
            <a href="./myOrder.html"><img src="" alt="全部订单"><span>全部订单</span></a>
            <a href="discountCoupon.html"><img src="" alt="我的优惠券"><span>我的优惠券</span></a>
            <a href="./myIntegral.html"><img src="" alt="我的积分"><span>我的积分</span></a>
            <a href="javascript:;"><img src="" alt="客服中心"><span>客服中心</span></a>
        </div>
    </div>
    <div class="ads container20">
        <img src="./images/homepage/ads.png" alt="">
    </div>
</section>
<footer>
    <div class="container20">
        <a href="SpecialMall.html" class="active"><img src="" alt="首页"><span>首页</span></a>
        <a href="javascript:;"><img src="" alt="基金会"><span>基金会</span></a>
        <a href="javascript:;"><img src="" alt="商学院"><span>商学院</span></a>
        <a href="javascript:;"><img src="" alt="购物车"><span>购物车</span></a>
        <a href="homepage.html"><img src="" alt="我的"><span>我的</span></a>
    </div>
</footer>
</body>
<script>
    const footerIcons = document.querySelectorAll("footer .container20 a img");
    const orderIcons = document.querySelectorAll(".myOrder-bottom a img");
    const menuIcons = document.querySelectorAll(".menu-icons a img")
    fillIccons(footerIcons,"footer-icon");
    fillIccons(orderIcons,"order-icon");
    fillIccons(menuIcons,'menu-icon');
    function fillIccons(box,str){
        for (let i = 0; i < box.length; i++) {
            box[i].src = `./images/homepage/${str}${i + 1}.png`;
        }
    }
</script>
</html>